import './index.scss'
import {useState,useEffect} from 'react'
import {Shucai} from '../../../../../request/api'
const Recommend=()=>{
    const [sucai, setSucai] = useState([]);
  useEffect(() => {
    Shucai().then((res) => {
      console.log(res, '素材');
      setSucai(res.data.material);
    });
  }, []);
    
    return (
        <div className="Recommend">
      <div className="Recommend-top">
        <div style={{ color: 'white', background: '#f86f4a' }}>形状</div>
        <div style={{ color: 'white', background: '#5b89ff' }}>线条</div>
        <div style={{ color: 'white', background: '#00c4cc' }}>箭头</div>
      </div>
      {sucai.map((item, index) => (
        <div key={index} className="box_vox">
          <div className="title">
            <span>{item.title}</span>
            <span>全部</span>
          </div>
          <div className="image_box">
            {item.children.map((item1:any, index1:any) => (
              <div
                key={index1}
                className="imgae"
                draggable="true"
                onDragStart={(e) => {
                  e.dataTransfer.setData('image', JSON.stringify(item1.img));
                }}
              >
                <img src={item1.img} alt="" style={{ width: '80px', height: '80px' }} />
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
    )
} 
export default Recommend